{% extends 'base.html' %}

{% block content %}
<link href="/static/assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css">
<link href="/static/assets/plugins/select2/select2.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css"  rel="stylesheet" type="text/css" />
<script src="/static/assets/plugins/select2/select2.min.js"></script>
<script src="/static/assets/plugins/select2/select2_locale_zh-CN.js"></script>
<script src="/static/assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script src="/static/assets/plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>

<style>
   .btn_margin{
      margin-right:4px !important;
   }
   .word-break{
          word-break:break-all !important;
          word-wrap: break-word !important;
   }
   .tr_color_1{
     background-color:rgb(173,216,230,0.9) !important;
   }
   .tr_color_2{
     background-color:rgb(176,196,222,0.9) !important;
   }
   .btn_disable{
         color:#ffffff !important;
         background-color: #778899 !important;
         border: 1px solid #778899 !important;
   }

/*
   #table {
       table-layout:fixed;
   }
   #table td{
       width:100% !important;
       word-break:keep-all !important;
       white-space:nowrap !important;
       overflow:hidden !important;
       text-overflow:ellipsis !important;
       -o-text-overflow:ellipsis !important;
       -icab-text-overflow: ellipsis !important;
       -khtml-text-overflow: ellipsis !important;
       -moz-text-overflow: ellipsis !important;
       -webkit-text-overflow: ellipsis !important;
   }
*/
</style>


<div class="container">
    <!-- Page-Title -->
    <div class="row ">
            <div class="col-sm-12">
                <h4 class="page-title">集群配置</h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="#">集群配置</a>
                    </li>
                    <li class="active">
                        <a href="/app/bind/">环境绑定</a>
                    </li>

                </ol>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-box">
                        <div class="row">
                            <div class="col-btn-1" style="float:right;padding:6px 10px 6px 6px">
                                    <button class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#add_detail_modal">新增绑定</button>
                            </div>
                            <div class="col-sm-12" style="padding-top: 10px">
                                <div class="bootstrap-table">
                                    <div class="table-responsive">
                                        <table id="bind_list_table" class="bootstrap-table table-responsive"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>

    <div id="change_detail_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">集群信息</h4>
            </div>
            <form id="bind_change_form"  role="form" method="POST" enctype="multipart/form-data">
                {% csrf_token  %}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                            <div class="form-group" >
                                    <input id="id"  type="hidden" class="form-control" name="id">
                            </div>

                            <div class="form-group" >

                                <label class="col-md-3 control-label" style="padding-top:15px" for="state-warning"><span style="color:red">* </span>环境名</label>
                                <div class="col-md-9">
                                    <input id="env_name"  type="text" class="form-control" name="env_name">
                                </div>
                            </div>
                            </br>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>命名空间</label>
                                <div class="col-md-9">
                                    <input id="namespace" class="form-control" name="namespace"></input>
                                </div>
                            </div>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>绑定集群</label>
                                <div class="col-md-9">
                                    <input id="k8s_cluster"  type="text" class="form-control" name="k8s_cluster">
                                </div>
                            </div>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>环境描述</label>
                                <div class="col-md-9">
                                    <input id="description"  type="text" class="form-control" name="description">
                                </div>
                            </div>
                        </br></br>
                    </div>
                </div>

            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                <button type="button"  class="btn btn-info waves-effect waves-light" onclick="Change_bind_info()">修改</button>
            </div>
            </div>
            </form>
        </div>
    </div>
    </div>

    <div id="add_detail_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">新增绑定信息</h4>
            </div>
            <form id="bind_add_form"  role="form" method="POST" enctype="multipart/form-data">
                {% csrf_token  %}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                            <div class="form-group" >
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>环境名</label>
                                <div class="col-md-9">
                                    <input id="add_env_name"  type="text" class="form-control" name="env_name">
                                </div>
                            </div>
                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>命名空间</label>
                                <div class="col-md-9">
                                    <input id="add_namespace"  class="form-control" name="namespace"></input>
                                </div>
                            </div>
                                </br></br>

                            <div class="form-group" >
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>发布集群</label>
                                <div class="col-md-9">
                                    <select id="add_k8s_cluster" name="k8s_cluster" class="form-control"></select>
                                </div>
                            </div>

                            <div class="form-group" >
                                </br></br>
                                <label class="col-md-3 control-label" style="padding-top:5px" for="state-warning"><span style="color:red">* </span>环境描述</label>
                                <div class="col-md-9">
                                    <input id="add_description"  type="text" class="form-control" name="description">
                                </div>
                            </div>


                        </br></br>
                    </div>
                </div>

            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                <button type="button"  class="btn btn-info waves-effect waves-light" onclick="add_bind_info()">确定</button>
            </div>
            </div>
            </form>
        </div>
    </div>
    </div>


    <div id="del_detail_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">删除环境</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12" style="text-align: center">
                        <span>环境ID：</span>
                        <span id="del_id" name="del_id"></span>
                    </div>
            </div>
                <div class="row" style="padding-top:8px">
                    <div class="col-md-12" style="text-align: center">
                        <span>环境名称：</span>
                        <span id="del_env" name="del_env"></span>
                    </div>
                </div>

            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                <button type="button"  class="btn btn-danger waves-effect waves-light" onclick="del_bind()">删除</button>
            </div>
            </div>
            </form>
        </div>
    </div>
    </div>




</div>


<script>

    var responseHandler = function (e) {
      if (e.data && e.data.count > 0) {
      //获取集群选框
          for (var i = 0; i < (e.data.k8s_clusterinfo).length; i++) {
                var option = "<option value='"+(e.data.k8s_clusterinfo)[i]+"'>"+(e.data.k8s_clusterinfo)[i]+"</option>";
                $('#add_k8s_cluster').append(option);
            }

          return { "rows": e.data.rows, "total": e.data.count };
      }
      else {
          return { "rows": [], "total": 0 };
      }
    };

    function operateFormatter(value, row, index) {
        return [
                '<button type="button" class="change btn btn-info btn-xs">编辑</button>',
                '<button type="button" class="delete btn btn-danger btn-xs" style="margin-left:10px">删 除</button>',
        ].join('');
    }

    window.operateEvents = {
        'click .change': function (e, value, row, index) {
            $("#id").val(row.id);
            $("#env_name").val(row.env_name);
            $("#namespace").val(row.namespace);
            $("#namespace").attr('readonly', true);
            $("#k8s_cluster").val(row.k8s_cluster);
            $("#k8s_cluster").attr('readonly', true);
            $("#description").val(row.description);
            $("#change_detail_modal").modal();
        },


        'click .delete': function (e, value, row, index) {
            $("#del_id").html(row.id);
            $("#del_env").text(row.env_name);
            $("#del_detail_modal").modal();
        }
    };


    $('#bind_list_table').bootstrapTable({
        url: "{% url 'bind' %}?refresh=true",
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: function (params) {
            return {
                pageSize: params.limit, // 每页要显示的数据条数
                offset: params.offset, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则
            }
        },
        sidePagination: "server",
        pageNumber:1,
        pageSize: 20,
        pageList: [20, 30, 50],
        search: false,
        strictSearch: false,
        <!--showColumns: true,                  //是否显示所有的列-->
        <!--showRefresh: true,                  //是否显示刷新按钮-->
        minimumCountColumns: 1,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        responseHandler: responseHandler,
        formatRecordsPerPage: function (pageNumber) {
            return "每页显示" + pageNumber + "条记录";
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            return "显示第" + pageFrom + "到第"+ pageTo + "条记录，总共"+ totalRows + "条记录";
        },
        columns: [
        {
            field: 'id',
            title: 'id',
            width: '3%',
        },
          {
            field: 'env_name',
            title: '环境名',
            width: '8%',
        }, {
            field: 'namespace',
            title: '命名空间',
            width: '8%',
        },{
            field: 'k8s_cluster',
            title: '绑定集群',
            width: '8%',
        },{
            field: 'description',
            title: '环境描述',
            width: '8%',
        },{
            field: 'operate',
            title: '操作',
            width: '10%',
            cellStyle:{
                css:{
                    "overflow": "inherit"
                }
            },
            align: 'center',
            events: operateEvents,
            formatter: operateFormatter
        }]
    });

    //修改用户数据
    function Change_bind_info(){
        var form_data = new FormData(document.getElementById("bind_change_form"));
        $("#con-close-modal").hide();
        $("#loading_modal").modal();
        $.ajax({
            method:'POST',
            url:"/app/bind/",
            dataType: 'json',
            data:form_data,
            processData:false,
            contentType:false,
            cache: false,
            success:function(result){
                    var msginfo=result.msginfo;
                    if(msginfo){
                       $.Notification.autoHideNotify('success','top right','系统通知', msginfo);
                       $("#change_detail_modal").modal('hide');
                       $('#bind_list_table').bootstrapTable("refresh");
                    }
                    else{
                       var msgerror=result.msgerror;
                       $.Notification.autoHideNotify('error','top right','系统通知', msgerror);
                       $("#change_detail_modal").modal('hide');
                    };
            },
            });
    }

    //添加集群信息
    function add_bind_info(){
        var form_data = new FormData(document.getElementById("bind_add_form"));
        $("#con-close-modal").hide();
        $("#loading_modal").modal();
        $.ajax({
            method:'POST',
            url:"/app/bind/",
            dataType: 'json',
            data:form_data,
            processData:false,
            contentType:false,
            cache: false,
            success:function(result){
                    var msginfo=result.msginfo;
                    if(msginfo){
                       $.Notification.autoHideNotify('success','top right','系统通知', msginfo);
                       $("#add_detail_modal").modal('hide');
                       $('#bind_list_table').bootstrapTable("refresh");
                    }
                    else{
                       var msgerror=result.msgerror;
                       $.Notification.autoHideNotify('error','top right','系统通知', msgerror);
                       $("#add_detail_modal").modal('hide');
                    };
            },
            });
    }

    //删除绑定信息
    function del_bind(){
        var id = $("#del_id").text();
        $.ajax({
            method:'POST',
            url:"/app/bind/",
            dataType: 'json',
            data:{"id": id, "type":"del"},
            success:function(result){
                    var msginfo=result.msginfo;
                    if(msginfo){
                       $.Notification.autoHideNotify('success','top right','系统通知', msginfo);
                       $("#del_detail_modal").modal('hide');
                       $('#k8s_list_table').bootstrapTable("refresh");
                    }
                    else{
                       var msgerror=result.msgerror;
                       $.Notification.autoHideNotify('error','top right','系统通知', msgerror);
                       $("#del_detail_modal").modal('hide');
                    };
            },
            });
    }


</script>

{% endblock %}
